<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/login.css" />
		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../js/yanzhengma.js"></script>
		<script type="text/javascript">
			$(function(){
				//登录方式的切换
				$('.login .btn_login').click(function(){	 
					$('.login').css('display','none');
					$('.login_phone').css('display','block')
				})
				$('.login_phone .btn_login').click(function(){
					$('.login').css('display','block');
					$('.login_phone').css('display','none')
				})
				//手机登录方式的验证码
				$('.yzm_tu').html(yanzheng());
				$('.yzm_tu').click(function(){
					$('.yzm_tu').html(yanzheng());
				});
				//获取短息验证码
				$('.login_phone .content .getyzm').click(function(){
					var a = ($('.tu_yzm').val()).toUpperCase();
					var b = ($('.yzm_tu').html());
					var str = $('.login_phone .content .name').val()
					if(str == ''){
						$('.tip').css('display','block');
					}else if(!reg.test(str)){
						$('.tip').css('display','block');
						$('.tip').html('请填写正确的手机号');
					}else{
						$('.tip').css('display','none');
						
						if(a == b){
							$('.login_phone .content .getyzm').css({
								'background':'#e6e6e6',
								'color':'#999'
							});
							var timer =null;
							var a = 100;				
							timer = setInterval(cut,1000);
							function cut(){					
								a--;
								//console.log(a)
								$('.getyzm').val(a + '秒后重新获取')
								if(a <=0){
									clearInterval(timer);
									$('.getyzm').val('发送验证码')
									$('.getyzm').css({
										'background':'#f8f8f8',
										'color':'#000'
									})
									
								}
							}
						}else{
							$('.login_phone .content .tip').css('display','block');
							$('.login_phone .content .tip').html('图片验证码错误，请重新填写')
						}
					}
				})
				//验证手机号框的函数
				var reg = /^1{1}\d{10}$/;
				$('.login_phone .content .name').blur(function(){
					var str = $('.login_phone .content .name').val();
//						alert(reg.test(str))
					if(str == ''){
						$('.tip').css('display','block');
					}else if(!reg.test(str)){
						$('.tip').css('display','block');
						$('.tip').html('请填写正确的手机号');
					}else{
						$('.tip').css('display','none');
					}
					
				})
				
				$('.login_btn').click(function(){
					var name = $('.name').val();
					var yzm = $('.tu_yzm').val();
					if(yzm){
						window.location.href = "../index.html";
					}
				
				})
			})
		</script>
	</head>
	<body>
		<div id="bar">
			<a href="../index.html">
				<img src="../img/shop_182x60.png"/>
				<span>中关村在线旗下网上商城</span>
			</a>
			<p><a href="register.html">立即注册</a>还没有ZOL商城账号？</p>
		</div>
		
		<div id="form">
			<div class="ad"></div>
			<!--/手机号/邮箱/用户名/-->
			<div class="login">
				<div class="head">
					<h3>登录ZOL商城</h3>
					<a  class="btn_login" href="javascript:;">手机动态码登录</a>
				</div>
				<div class="content">
					<p class="tip">登录失败，用户名或密码错误</p>
					<input class="name" type="text" placeholder="手机号/邮箱/用户名" maxlength="11"/>
					<input class="pass" type="password" placeholder="密码" />
					<a class="findpwd" href="#">忘记密码？</a>
					<input type="button" class="login_btn" value="登录" />
				</div>
				<div class="footer">
					<span class="hezuo">合作账号登录</span>
					<a href="#" class="sina"></a>
					<a href="#" class="qq"></a>
					<a href="#" class="alipay"></a>
					<a href="#" class="baidu"></a>
				</div>				
			</div>
			<script type="text/javascript">
				$('.login_btn').click(function(){
					var name = $('.name').val();
					var pwd = $('.pass').val();
					$.ajax({
						url:"http://datainfo.duapp.com/shopdata/userinfo.php",
						data:{
							status:"login",
							userID:name,
							password:pwd
						},
						success:function(data){
							console.log(data);
							var oDate = JSON.parse(data);
							if(data == 0){
								$('.tip').css('display','block');
								$('.tip').html('用户名不存在');
							}else if(data == 2){
								$('.tip').css('display','block');
								$('.tip').html('登录失败，用户名或密码错误');
							}else if(oDate){
//								alert("登录成功");
								$('.tip').css('display','none');
								setCookie(name);
								setCookie("a",true);
								window.location.href = '../index.html';
							}
						}
					});
				})
			</script>
			<!--手机短信验证登录-->
			<div class="login_phone">
				<div class="head">
					<h3>登录ZOL商城</h3>
					<a  class="btn_login" href="javascript:;">普通方式登录</a>
				</div>
				<div class="content">
					<p class="tip">请填写手机号</p>
					<input class="name" type="text" placeholder="手机号" maxlength="11" />
					<i class="right_tip"></i>
					<input class="tu_yzm" type="text" placeholder="图片验证码" />
					<div class="yzm_tu"></div>
					
					<input class="duanxin_yzm" type="text" placeholder="短信验证码" />
					<input class="getyzm" type="button" value="发送验证码"></input>
					<input type="button" class="login_btn" value="登录" />
				</div>
				<div class="footer">
					<span class="hezuo">合作账号登录</span>
					<a href="#" class="sina"></a>
					<a href="#" class="qq"></a>
					<a href="#" class="alipay"></a>
					<a href="#" class="baidu"></a>
				</div>
				
			</div>
		</div>
		
		<div id="footer">
			<div class="innerfooter">
				<div class="about">
					<a href="#">关于ZOL商城</a>|
					<a href="#">联系我们</a>|
					<a href="#">帮助中心</a>|
				</div>
				<div class="copyright">
					<a href="#">©2016.中关村在线 版权所有</a>
				</div>
			</div>
		</div>
		
	</body>
</html>
